<template>
  <div>
      <p>pinia数据---{{num}}-----
          <button @click="add">增加</button>|<button @click="reset">重置</button>|<button @click="edit">修改</button></p>
      <p>{{nav}}----{{navLen}}-----<button @click="act">actions</button></p>
      <p>修改了--{{times}}--次状态数据</p>
  </div>
</template>

<script setup lang='ts'>
import {useNav} from '@/pinia/index'
import {storeToRefs} from 'pinia'
import {ref} from 'vue'
let store=useNav()
let {nav,num,navLen}=storeToRefs(store) 
console.log(store,'store参数',store.$getters)

function add(){
    //修改state中的数据
    //---1
    /*
        store.$patch({
            num:num.value+1
        })
    */
    //---2
    store.$patch(state=>{
       state.num++
       state.nav.push(state.num)
    })
    // console.log(store.$state,'store参数')
}

function reset(){
    //重置state中的数据,回复到index中最开始的数据
    store.$reset()
}

function edit(){
    //将state的数据直接替换
    store.$state={
        num:"jjjjj",
        nav:[12,'kkk']
    }
}

function act(){
    //使用actions方法
    store.navput('ffff')
}

let times=ref(0)
store.$subscribe((muta,state)=>{
    //监听state中数据变化
    times.value++
    
    console.log(muta,'***--',state)
})

store.$onAction(arg=>{
    //监听actions操作
    console.log(arg,'操作了actions')
})

</script>

<style>

</style>